import React, { useState } from'react';
import { NavBar, Dropdown, Image, Tag, Button } from 'antd-mobile';
import { LeftOutline, DownOutline, FilterOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
import '../styles/doctorList.scss'

// 医生数据接口
interface Doctor {
  id: string;
  name: string;
  title: string;
  department: string;
  hospital: string;
  price: number;
  imageUrl: string;
  specialties: string[];
}

const DoctorListPage: React.FC = () => {
  const navigate = useNavigate();
  // const { department } = useParams<{ department: string }>();

  // 筛选条件
  const [filter, setFilter] = useState({
    doctor: '全部医生',
    date: '出诊日期',
    sort: '综合排序'
  })

  // 医生数据
  const [doctors] = useState<Doctor[]>([
    {
      id: '1',
      name: '张三',
      title: '主任医师',
      department: '内科',
      hospital: '上海儿童医院',
      price: 3000,
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      specialties: ['儿科', '妇科']
    },
    {
      id: '2',
      name: '李四',
      title: '副主任医师',
      department: '外科',
      hospital: '北京协和医院',
      price: 2500,
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      specialties: ['肿瘤', '神经外科']
    },
    {
      id: '3',
      name: '李医生',
      title: '主任医师',
      department: '内科',
      hospital: '上海儿童医院',
      price: 3000,
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      specialties: ['儿科', '妇科']
    },
  ])

  const handleBack = () => {
    navigate('/home');
  }

  const handleBooking = (doctorId: string) => {
    console.log(`预约医生 ${doctorId}`)
    // 导航到预约页面
    navigate(`/booking/${doctorId}`);
  }

  return (
    <div className="doctor-list-page">
      {/* 顶部导航栏 */}
      <NavBar
        className='nav-bar'
        backArrow={<LeftOutline />}
        onBack={handleBack}
        right={<FilterOutline fontSize={18} />}
      >心内科医生</NavBar>  

      {/* 筛选条件 */}
      <div className="filter-section">
        <Dropdown>
          <Dropdown.Item
            key="doctor"
            title={
              <span className="dropdown-title">
                {filter.doctor} <DownOutline fontSize={12} />
              </span>
            }
            className="dropdown-item"
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setFilter({...filter, doctor: '全部医生'})}>全部医生</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, doctor: '主任医师'})}>主任医师</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, doctor: '副主任医师'})}>副主任医师</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, doctor: '主治医师'})}>主治医师</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, doctor: '住院医师'})}>住院医师</div>
            </div>  
          </Dropdown.Item>
          <Dropdown.Item
            key="date"
            title={
              <span className="dropdown-title">
                {filter.date} <DownOutline fontSize={12} />
              </span>
            }
            className="dropdown-item"
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setFilter({...filter, date: '全部日期'})}>全部日期</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, date: '今天'})}>今天</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, date: '明天'})}>明天</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, date: '本周'})}>本周</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, date: '下周'})}>下周</div>
            </div>  
          </Dropdown.Item>
          <Dropdown.Item
            key="sort"
            title={
              <span className="dropdown-title">
                {filter.sort} <DownOutline fontSize={12} />
              </span>
            }
            className="dropdown-item"
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setFilter({...filter, sort: '综合排序'})}>综合排序</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, sort: '价格最低'})}>价格最低</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, sort: '价格最高'})}>价格最高</div>
              <div className="dropdown-option" onClick={() => setFilter({...filter, sort: '人气最高'})}>人气最高</div>
            </div>  
          </Dropdown.Item>
        </Dropdown>
      </div>

      {/* 医生列表 */}
      <div className="doctor-list">
        {doctors.map(doctor => (
          <div className="doctor-card" key={doctor.id} onClick={() => navigate(`/doctor/${doctor.id}`)}>
            <div className="doctor-avatar">
              <Image 
                src={doctor.imageUrl}
                width={60}
                height={60}
                fit="cover"
                placeholder=""
                alt={doctor.name}
                />
            </div>
            <div className="doctor-info">
              <div className="doctor-header">
                <h3 className="doctor-name">{doctor.name}</h3>
                <span className="doctor-price">¥{doctor.price} 元</span>
              </div>
              <div className="doctor-title">
                {doctor.title} | {doctor.department}
              </div>
              <div className="doctor-hospital">{doctor.hospital}</div>
              <div className="doctor-specialties">
                {doctor.specialties.map((specialty, index) => (
                  <Tag 
                    key={index} 
                    className="specialty-tag"
                    color={index % 2 === 0 ? 'blue' : 'purple'}
                    style={{ color: index % 2 === 0 ? '#1890ff' : '#722ed1'}}
                    >{specialty}</Tag>
                ))}
                <Button 
                  className="booking-btn"
                  color="primary"
                  onClick={(e) => {
                    e.stopPropagation(); // 阻止事件冒泡
                    handleBooking(doctor.id);
                  }}
                  >预约</Button>
            </div>
          </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default DoctorListPage;